<template>
	<div class="container">
		<div class="row">
			<div class="col-md-9">

				<ul class="nav nav-tabs">
					<li @click="changeCurrentTab(0)" :class="{active:state.currentTab==0}"><a
							href="javascript:;">我的文章</a></li>
					<li @click="changeCurrentTab(1)" :class="{active:state.currentTab==1}"><a
							href="javascript:;">我的评论</a></li>
				</ul>
				<template v-if="state.currentTab==0">
					<div class="title-bar">
						<div></div>
						<div class="right mt-20">
							<div class="btn-group" role="group" aria-label="...">
								<button type="button" class="btn btn-success btn-group-sm"
									@click="initUserArticle">我发布的</button>
								<button type="button" class="btn btn-warning btn-group-sm"
									@click="initFavoriteArticle">我收藏的</button>
							</div>
						</div>
					</div>
					<div class="article-content">
						<article-list v-if="state.articles&&state.articles.length>0" :list="state.articles">
						</article-list>

						<pagination v-if="state.articles.length!=state.total" :size="state.size" :page="state.page"
							:total="state.total" @change="changePager">
						</pagination>
						<div v-else-if="state.articles.length==state.total" class="text-center">
							加载完毕
						</div>
						<div v-else class="text-center">
							暂无数据
						</div>
					</div>
				</template>
				<div class="comment-list" v-if="state.currentTab==1">
					<ul class="list-group" v-if="state.comments.length>0">
						<li class="list-group-item" v-for="(item,index) in state.comments">
							<h2 v-if="item.authorInfo" class="author">
								<img :src="item.authorInfo.profile" class="avatar">
								<span class="username">{{item.authorInfo.username}}</span>
							</h2>
							<h4 class="list-group-item-heading">{{item.body}}</h4>
							<p class="list-group-item-text">{{item.createdAt}}</p>
						</li>
					</ul>
					<div v-else>
						暂无评论
					</div>
				</div>
			
			</div>
			<div class="col-md-3">
				<div class="title-bar">
					<div class="title">个人资料</div>
					<div class="right">
						<button class="btn btn-danger btn-sm" @click="jumpProfile">编辑资料</button>
					</div>
				</div>
				<div class="panel panel-default profile">
					<!-- Default panel contents -->
					<div class="panel-heading">
						<img :src="state.user.profile" class="avatar">
						<span class="username">{{state.user.username}}</span>
					</div>
					<div class="panel-body">
						<h4>简介</h4>
						{{state.user.note?state.user.note:''}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import pagination from '../../components/Pagination/index.vue'
	import articleList from '../../components/Article/list.vue'
	import {
		ref,
		reactive,
		toRefs,
		onBeforeMount
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router'

	import {
		GetCurrentUser
	} from '../../api/user.js'

	import {
		GetUserArticle,
		GetFavoriteArticle
	} from '../../api/article.js'

	import {
		GetComment
	} from '../../api/comment.js'

	import {
		useUserStore
	} from '../../store/user.js'



	const route = useRoute()
	const router = useRouter()

	const userStore = useUserStore()
	const {
		userInfo
	} = userStore

	const state = reactive({
		user: ref({}),
		userId: ref(''),
		articles: ref([]),
		total: ref(0),
		page: ref(1),
		size: ref(10),
		currentTab: ref(0)
	})


	onBeforeMount(() => {
		initUser()
		initUserArticle()
	})
	const initUser = () => {
		if (route.query && route.query.id) {
			state.userId = route.query.id;
			GetCurrentUser({
					id: state.userId
				})
				.then(({
					code,
					msg,
					data
				}) => {
					if (code == 200) {
						state.user = data.user
					}
				})
				.catch(err => {
					console.log('err', err)
				})
		}
	}
	const initUserArticle = () => {
		GetUserArticle({
				page: state.page,
				size: state.size,
				id: state.userId
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					console.log(data)
					state.articles = data.articles
					state.total = data.total

					console.log('state', state);
				}
			})
	}
	const initFavoriteArticle = () => {
		GetFavoriteArticle({
				id: state.userId
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					console.log(data)
					state.articles = data.articles
					state.total = data.total

					console.log('state', state);
				}
			})
	}
	const initUserComment = () => {
		GetComment({
				page: 1,
				size: 20,
				authorId: userInfo.id
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					state.comments = data.comments
				}
			})
	}
	const changePager = (page) => {
		state.page = page;
		initUserArticle()

	}
	const jumpProfile = () => {
		router.push({
			path: '/profile',
			query: {
				id: state.userId
			}
		})
	}
	const changeCurrentTab = (index) => {
		state.currentTab = index
		if (index == 1) {
			initUserComment()
		} else if (index == 0) {
			state.page = 1;
			initUserArticle()
		}
	}
</script>
